<template>
  <view class="main-page">
    <tabBar002
      @changeComponent="changeComponent"
      :initComponentName="activeComponentName"
      :tabBarList="tabBarList"
    ></tabBar002>
    <component :is="activeComponentName"></component>
    <!-- 日期选择 公共弹窗组件  -->
    <my-popup-globalt
      ref="popupGlobalt"
      @confirmDate="confirmDate"
      :initDate="initDate"
      :optional="optional"
    ></my-popup-globalt>
  </view>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
  name: "",
  props: {},
  components: {},
  setup() {
    const data = reactive({
      initDate: [],
      optional: "",
      popupGlobalt: null,
      activeComponentName: "componentsIndex",
      tabBarList: [
        {
          title: "组件",
          imageUrl: "/static/com.png",
          imageUrlActive: "/static/com-active.png",
          componentName: "componentsIndex",
        },
        {
          title: "app页面",
          imageUrl: "/static/app.png",
          imageUrlActive: "/static//app-active.png",
          componentName: "appPageIndex",
        },
      ],
    });

    const changeComponent = (name) => {
      data.activeComponentName = name;
    };

    // 日期选择确认
    const confirmDate = (dateArray) => {
      uni.$emit("dateChange", dateArray);
    };
    // 监听日期弹窗
    uni.$on("openPopupDate", (info) => {
      console.log(`打开日期选择弹窗，由${info.msg}发起`,info.initDate);
      data.initDate = info.initDate;
      data.optional = info.optional;
      data.popupGlobalt.openPopup();
    });
    return {
      confirmDate,
      changeComponent,
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="less">
/deep/ .title {
  &.active {
    color: #006eff !important;
  }
}
/deep/ .menu-content-bottom {
  height: calc(100% - 270rpx);
}
</style>
